<template>
  <div :class="pageType" class="menuBtnContain">

    <el-icon @click="windowMin">
      <svg-icon class="iconClass" icon-class="windowMin"/>
    </el-icon>
    <el-icon v-if="maxWindows" @click="windowRestore();">
      <svg-icon class="iconClass" icon-class="reduction"/>
    </el-icon>
    <el-icon v-else @click="windowMax();">
      <svg-icon class="iconClass" icon-class="fullScreen"/>
    </el-icon>


    <el-icon class="iconClass" @click="windowCloseToTray">
      <close/>
    </el-icon>


  </div>
</template>

<script setup>

import {windowCloseToTray, windowMax, windowMin, windowQuit, windowRestore} from "@/api/appEvent";
import useAppStore from "@/store/modules/appInfos";

import {computed} from "vue";


const {proxy} = getCurrentInstance();
//父组件传递的参数pageType
const props = defineProps({
  pageType: {
    type: String,
    default: ""
  }
});

const appStore = useAppStore()

const maxWindows = computed(() => appStore.mainWindowsMax)

onMounted(() => {
  const ipc = useAppStore().ipc;
  if (!ipc) return; //如果ipc不存在，直接返回

});


</script>

<style lang="scss" scoped>
.menuBtnContain {
  height: 30px;
  overflow: hidden;
  margin-right: 5px;
  display: flex;
  //靠右
  justify-content: flex-end;
  -webkit-app-region: drag;
  .iconClass {
    color: #333333;
  }

  :deep(>.el-icon) {
    -webkit-app-region: no-drag;
    font-size: 20px;
    width: 30px;
    height: 100%;


    &:last-child {
      //margin-right: 5px;
    }

    &:hover {
      background: rgba(183, 182, 182, 0.5);
      cursor: pointer;
    }
  }

  .fullScreen {
    font-size: 14px;
  }

  .closeIcon {
    &:hover {
      background: rgba(255, 0, 0, 0.8);
      color: #333333;
    }
  }

  .menuBG {
    width: 100%;
    background: linear-gradient(to right, #212498, #5D238F);

  }
}

.login {

  color: #000000;

}

.mainContent {
}
</style>
